<template>
    <div class="toast">{{toastText}}</div>
</template>

<style lang="scss" scoped>
.toast{
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: .1rem;
    border-radius: .05rem;
    background-color: rgba(0,0,0,.35);
    color: #ffffff;
}
</style>

<script>
import { reactive } from '@vue/reactivity'

export default {
  name: 'Toast',
  props: ['toastText']
}

function userToastEffect () {
  const data = reactive({
    toastShow: false,
    toastText: ''
  })

  function toastShow (text) {
    data.toastShow = true
    data.toastText = text
    setTimeout(() => {
      data.toastShow = false
    }, 2000)
  }
  return { data, toastShow }
}
export { userToastEffect }
</script>
